Overview 


Markup  language 

- Rules  of  the  language 

- Translating  stuff  into  markup  language 

- Procedures 

Style 

- The  cascade 

- Tools 

- Procedures 


How  Ctools  is  put  together 


Procedures:  markup  to  doctype 


markup  to  doctype  - avoid  quirks  mode! 

- Remember  the  green  and  red  boxes?  Quirks  mode 
(the  browser  rules)  may  make  things  difficult. 

which  doctype?  Some  advantages  to  XHTML 
strict: 

- xhtml  dialects  are  "machine  readable"  - mashups  are 
possibe 

- force  separation  of  data  and  presentation 

- cleaner,  meaner 


Decide  on  markup  - all  about 

meaning 

Build  meaning  into  the  markup 
The  WC3  DTD  is  the  boss  of  you 

http://www.w3.org/TR/xhtml  1/dtds.html 

Some  examples 

- Paragraph 

- List 
-Address 

- Strong 


Decide  on  markup:  thumb  rules 


items  are  arbitrary  (simple,  compound,  the 
context  decides) 

an  item  series  (p  p p p p p p p) 

lists  of  items  with  one  attribute  (ol,  u;) 

lists  of  items  with  two  attributes  that  are 
equivalent/related  (dl) 

lists  of  items  with  more  than  one  attribute  (table) 
sections  and  subsections  (hx  as  separators) 
presentational  crutches  (div,  span) 


Markup  a baby! 


Markup  a baby 

<p>lt  was  a <em>nice</em> 
baby...  it  had:</p> 

<ul> 

<li>a  hat</li> 

<li>cool  socks</li> 

</ul> 

<p>  It  was  in  the  park</p> 


Markup  a baby  (2) 

<p>Riiiiing!  Riiiing!  Riiiing!</p> 
<cite>Baby</cite> 

<blockquote>Hi  Mom!</blockquote> 

<cite>Mom</cite> 

<blockquote>Sweetie!  Where  are 
you?</blockquote> 

<cite>Baby</cite> 

<blockquote>  At  the  park,  where  you 
left  me  this  morning... </blockquote> 

<cite>Mom</cite> 

<blockquote>OMG!</blockquote> 


Markup  a taxi  stand 


Markup  a taxi  stand 


<0l> 

<li>388</li> 
<li>231  </li> 
<li>123</li> 
</ol> 


Markup  a taxi  stand 


<table> 

<thead  /> 

<tr> 

<td>388</td> 

<td>Fred</td> 

<td>Reliable</td> 

</tr> 

</table> 


Markup  a fruit  bowl! 


Markup  a fruit  bowl! 


<h1>Tropical  fruit  by  size</h1> 

<ol> 

<li>Pineapple</li> 

<li>Banana</li> 

</ol> 

<h1>Citrus  fruit</h1> 

<ul> 

<li>Orange</li> 

<li>Lemon</li> 

</ul> 

<h1  >Dangerous  fruit</h1  > 

<dl> 

<dt>Mango</dt> 

<dd>  Causes  alergic  reactions</dd> 
<dt>Strawberry</dt> 

<dd>  Can  choke  when  eaten</dd> 
</dl> 


Markup  a fruit  bowl!  (2) 


<h1>Tropical  fruit</h1> 

<h2>Pineapple</h2> 

<p>Hard  to  peel</p> 

<h2>Banana</h2> 

<blockquote>”Essential  to 
comedy”</blockquote> 

<h1>Round  fruit</h1> 

<h2>Citrus  fruit</h2> 

<h3>Orange</h3> 

<p>Some  pithy  remark</p> 
<h3>Lemon</h3> 

<p>Some  pithy  remark</p> 


Markup  a city  block 


This  is  crazy! 

Not  really  - see 
some 

examples  from 

Tantec  Celik 


Markup  Google 


Web  Images  Maps  News  Shopping  Gmail  more  V 


Sion  in 


Google 


1 

[tristram  shandy 

Search 

Advanced  Search 
Preferences 


Web  Books 


Results  1 - 10  of  about  2,760,000  for  tristram  shandy.  (0.11  seconds) 


The  Life  and  Opinions  of  Tristram  Shandy.  Gentleman  - Wikipedia  ... 

The  Life  and  Opinions  of  Tristram  Shandy,  Gentleman  (or,  more  briefly,  Tristram  Shandy)  is 
a novel  by  Laurence  Sterne.  It  was  published  in  nine  volumes,  ... 

en.wikipedia.org/wiki/Tristram  Shandy  - 35k  - Cached  - Similar  pages 

A Cock  and  Bull  Story  (2005) 

Tristram  Shandy  (UK)  (working  title)  Tristram  Shandy:  A Cock  and  Bull  Story  (USA) ...  The 
title  character  of  Tristram  Shandy  remains  famously  unborn,  ... 

www.imdb.com/title/tt0423409/  - 54k  - Cached  - Similar  pages 

Tristram  Shandy:  A Cock  and  Bull  Story  | Official  Movie  Site  ... 

The  official  Web  site  of  Michael  Winterbottom's  TRISTRAM  SHANDY:  A COCK  AND  BULL 
STORY.  After  receiving  rave  reviews  at  the  Toronto  Film  Festival,  ... 
www.tristramshandymovie.com/  - 25k  - Cached  - Similar  pages 

the  tristram  Shandy  web 

Annotated  edition  of  "Tristram  Shandy",  in  hypertext  format.  With  bibliography. 
www.tristramshandyweb.it/home.htm  - Ik  - Cached  - Similar  pages 

the  tristram  shandy  web 

Edward  Fisher,  Laurence  Sterne,  mezzotint  after  the  first  portrait  by  J.  Reynolds,  1760.  Last 
updated  June,  1,  2006.  Skip  Intro. 
www.tristramshandyweb.it/  - 4k  - Cached  - Similar  pages 


Markup:  Google,  ideal 


Web  Images  Maps  News  Shopping  Gmail  more  ▼ 


Sign  in 


Google 


jtristram  shandy 


Search 


Advanced  Search 
Preferences 


Web  Books 


Results  1 - 10  of  about  2,760,000  for  tristram  shandy.  (0.11  seconds) 


The  Life  and  Opinions  of  Tristram  Shandy.  Gentleman  - Wikipedia  ... 

The  Life  and  Opinions  of  Tristram  Shandy.  Gentleman  (or.  more  briefly.  Tristram  Shandy)  is 
a novel  by  Laurence  Sterne.  It  was  published  in  nine  volumes,  ... 

en.wikipedia.org/wiki/Tristram_Shandy  - 35k  - Cached  - Similar  pages 


^ Cock  and  Bull  Story  (2005) 

Tristram  Shandy  (UK)  (working  title)  Tristram  Shandy:  A Cock  and  Bull  Story  (USA) , 
:itle  character  of  Tristram  Shandy  remains  famously  unborn,  ... 

www.imdb.com/title/tt0423409/  - 54k  - Cached  - Similar  pages 


The 


<li> 


Tristram  Shandy:  A Cock  and  Bull  Story  | Official  Movie  Site  ... 

The  official  Web  site  of  Michael  Winterbottom's  TRISTRAM  SHANDY  A COCK  AND  BULL 
STORY.  After  receiving  rave  reviews  at  the  Toronto  Film  Festival.  ... 

www.tristramshandymovie.com/  - 25k  - Cached  - Similar  r iges 


the  tristram  Shandy  web 

Annotated  edition  of  "Iristram  Shandy",  in  hypertext  format.  With  bibliography. 

www.tristramshandyweb.it/home.htm  - Ik  - Cached  - Similar  pages 


the  tristram  shandy  web  ^ * 1 -3 

tawara  t-isner.  Laurence  Sterne,  mezzotint  after  the  first  portrait  by  J Reynolds.  1760.  Last 
updated  June,  1,  2006.  Skip  Intro. 

www.tristramshandyweb.it/  - 4k  - C.-ched  - Sin-i,  p.-ges 


Markup:  Google,  more  ideal 


Web  Images  Maps  News  Shopping  Gmail  more  ▼ 


Sign  in 


<div> 

<ul> 


p 


Google 


tristram  shandy 


<div> 

<form> 

input  field,  input  button 

<P> 

links 

</div> 


Search 


Advanced  Search 
Preferences 


Markup  looale:  the  reality 


Meaningless  markup 

- Where  are  the  lists? 

Presentational  markup 

- tables 

- divs,  spans 

- font 

- underline,  bold,  nobr  -why  not  blink! 

But  is  ok!  Sort  of 

- It  is  essentially  HTML  4 transitional  loose. dtd 

- A lot  of  old  browsers  out  there! 


Markup  example 

Work  without  style  - needs  to  make  sense 
“naked” 

Add  meaningless  (from  the  point  of  view  of 
markup)  as  last  step  because  of: 

- Canvas  needs 

- Flexibility 

- Positioning  issues 


What  markup? 


Welcome  to  SI539 


About  Contact  Pictures  Membership  Application 


Welcome  to  the  SI539  Sample  Site 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swarai  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 


MMMarkup 


Welcome  to  SI539 


About  Contact  Pictures  Membership  Application 


Welcome  to  the  SI539  Sample  Site 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swarai  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 


Welcome 


<h1  />Welcome...</h1> 

<ui> 

<li><a>About</a></li> 


</ul> 

<h  1 >Welcome . . . </h  1 > 
<P> 

<blockquote  /> 
<blockquote  /> 


Adding  Markup 


Welcome  to  SI539 


<div> 


About  Contact  Pictures  Membership  Application 


elcome  to  the  SI539  Sample  Site 


<div> 

<h1> 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 


<ul> 


<li><span  /></li> 
<li><a><span  /></a></li 


</ul> 


Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swarai  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 


</div> 

<div> 


</div> 

</div> 


MMMarkup 


These  are  the  members  of  SI539  who  are  in  good  standing  and  have 
paid  all  their  dues. 


Name 

E-Mai 

Start  Date 

Ruby  Rails 

ruby@si539.com 

2006 

Robby  CSS 

robby@si539.com 

2004 

Harriet  HTML 

harriet@si539.com 

2004 

If  you  think  there  is  an  error  in  the  above  send  mail  to 
membership@si539.com. 


Notes: 

1 - Added  info  and  structure 

2 - text  are  paragraphs 


Members 


<table  summary=“what  it  is”> 

<thead> 

<tr> 

<th  scope=“col”>Name</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td>Ruby  Rails</td> 


</tr> 


</table> 


Yet  More  MMMarkup 


These  are  the  members  of  SI539  who  are  in  good  standing  and  have 
paid  all  their  dues. 


Name 

E-Mail 

Start  Date 

Ruby  Rails 

ruby@si539.com 

2006 

Robby  CSS 

robby@si539.com 

2004 

Harriet  HTML 

harriet@si539.com 

2004 

<table  summary-1  what  it  is” 
class=“flatTable”> 

<thead> 

<tr> 

<th  scope=“col”  class=“firsthead”>Name</th> 


If  you  think  there  is  an  error  in  the  above  send  mail  to 
membership@si539.com. 

Notes: 

New  classes,  more  structure 

Spot  the  classes  added  for  IE  6! 

The  table  internals  can  be  part  of 
the  hierarchy 


<th  scope=“col”  class=“lasthead”>Start 
Date</th> 

</tr> 

</thead> 

<tbody> 

<tr  class=“odd”> 

<td><h3>Ruby  Rails</h3></td>.... 
</tr> 

<tr  class- ‘even”> 

<td><h3>Ruby  Rails</h3></td>.... 
</tr> 

</tbody> 

</table> 


Even  more  MMMarkup 


<form> 

<fieldset><legend  /> 
<P> 

<label  for=“this”> 
Enter... 

Note:  </label> 

<input  type- ‘text” 

A fieldset  is  not  “meaningful”  as  this  id=“this”/> 

is  the  only  formish  block  in  this  view.  </p> 


— Required  Information 
Enter  your  name:  ~ 
Enter  your  E-Mail:  ~ 

^ Submit  'l 


The  <label />  <input />  is  a unit  of 

MMM  (more  on  this  later)  </fieldset> 

</form> 


Note  the  “empty”  input  - XHTML 


Style:  the  cascade 


http://www.w3.orq/TR/REC-CSS2/cascade.html#cascade 
http://css.maxdesiqn.com.au/selectutorial/advanced  conflict.htm 

Note:  X > Y means  that  X is  more  powerful  than  Y 

• Origin  dictates  (author  > user  > default)  + limportant 

• Location  dictates  (old  style  [font]  > inline  > linked) 

• Specificity 

- The  more  detailed  the  selector,  the  more  trumping  power 

- “this  x”  > “these  x”  > “all  x” 

- Assuming  all  X inherit:  what  will  “thisX”  look  like? 

- .allX  {border:2px  solid  red;  background:pink} 

- .theseX  {font-size:small:  background:lime} 

- .thisX  {border: Ipx  solid  red} 


Style:the  cascade.  Who  wins? 
What  color  will  it  be? 


<body> 

<p> 

<span> 

<a  href=“#”  id=“bingo”> 

A link 

</a> 

</span> 

</p> 

</body> 


Author  sheet 

a {colonyellow} 

User  sheet 
a {color:  red} 

how  about 

Author  sheet 

a {colonyellow} 

User  sheet 
a {colonred  limportant} 


Style:the  cascade.  Who  wins? 
What  color  will  it  be? 


<body> 

<p> 

<span> 

<a  href=“#”  id=“bingo”> 

A link 

</a> 

</span> 

</p> 

</body> 


body{  color:gray} 
p {color:blue} 
span  {color:green} 
a {color:fuchsia} 
span  a {color:black} 
p span  a {color:lime} 
body  p span  a {color:red} 
#bingo{display:none} 


Style:the  cascade.  What  does  it 

all  mean? 

p a {all  <a>  descendants  of  <p>} 
p > a {all  <a>  children  of  <p>} 
p * {all  descendants  of  <p>} 
p > * > a {all  grandchildren  of  <p>} 
span#shriek  {the  one  <span>  that  has  a shriek  id} 
span.omg  {all  <span>  with  an  omg  class} 
span[class=omg]  {all  <span>  with  an  omg  class} 
span  + a { all  <a>  that  are  the  same  level  as  a <span>  } 

p#spud  > * > a.bungo[href=the_bad_place.html] 


Styling:  tools  and  terminology 


- required  editors  features: 

syntax  highlighting,  code  completion 

- desirable  editor  features: 

autoformat,  validation,  browser  hints,  packaging 

- Firebug,  Web  Developer  Toolbar 
Terminology 


hi  (color \recf} 
selector  (attribute: value} 


Styling:  procedure 


1 . zero  out  the  default  stylesheet  of  the 
browser 

http://developer.vahoo.com/vui/reset/ 

2.  map  the  cascade,  working  from  a design 

3.  add  style  selectors  to  markup 
(if  needed  at  all!) 

4.  style  for  IE  6 first 

5.  style  for  Moz/Safari/IE  7 last 


Styling:  add  style  selectors  to 

markup 

economy  - make  cascade  work  for  you! 

but  make  sure  you  have  what  you  need 

addressability  for  styling  - but  behaviours 
as  well 

choices 

- id  or  class? 

- can  address  without  adding  either?  Leave 
alone  then 


elcome  to  SI539 


Adding  style  hooks 


w 


About  Contact  Pictures  Membership  Application 


telcome  to  the  SI539  Sample  Site 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swarai  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 


Why  ids? 

Why  not  just  class 
everything? 

What  if  I need  an  <ul>  in 
#content  that  needs  to  look 
different  than  the  one  in 

#nav  ? 


<div  id=“wrap’  > 

<div  id=“nav’> 

<h1  /> 

<ul> 

<li  id=“current”><span  /></li> 
<li><a><span  /></a></li> 

</ul> 

</div> 

<div  id=“content’  > 

<h1  /> 

</div> 

</div> 


Adding  style 


Welcome  to  SI539 


About  Contact  Pictures  Membership  Application 


telcome  to  the  SI539  Sample  Site 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swarai  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 


Why  ids? 

Why  not  just  class 
everything? 

What  if  I need  an  <ul>  in 
#content  that  needs  to  look 
different  than  the  one  in 

#nav  ? 


<div  id=“wrap”> 

<div  id- ‘nav:  > 

<h1  /> 

<ul> 

<li  id=“current”><span  /></li> 
<li><a><span  /></a></li> 

</ul> 

</div> 

<div  id-‘content  > 

<h1  /> 

</div> 

</div> 

Everything  is  addressable! 

#nav  hi 
#nav  ul 
#nav  li 
#nav  li  a 
#nav  li  a span 

#nav  li#current 
#nav  li#current  span 


Styling:  style  for  IE  6 first 


• Crippled  implementation  of  CSS1 

http://www.westciv.com/stvle  master/academv/ 
browser  support/selectors.html 

• Keep  it  simple  - standard  selectors  + 
class  + id,  few  fancy  paths 

• And  no  fancy  property  and  values 

If  you  need  fancy,  make  sure  that  the 
markup  is  there  for  it... 


For  example 


telcome  to  SI539 


About  Contact  Pictures  Membership  Application 


Welcome  to  the  SI539  Sample  Site 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion, 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swarai  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 

If  you  wanted  to  add  a pipe  between  each 
list  element,  you  need  to  know  which  is 
the  first! 

The  IE  6 way 

li  {border-left: Ipx  solid  lime} 
li.fi rst{  bordennone} 


<div  id- ‘wrap”> 

<div  id=“nav”> 

<hl  /> 

<ul> 

<li  id=“current” 

class- ‘first”><span  /></li> 

<li><a><span  /></a></li> 

</ul> 

</div> 

<div  id=“content”> 

<h1  /> 

</div> 

</div> 


The  modern  browser  way: 

#nav  > ul  > li  {border-left: Ipx  solid  lime} 
#nav  > ul  > li:first-child  {bordennone} 


Styling:  style  for  Moz/Safari/IE  7 

last 

• Dynamic  pseudo  class  selectors  ( :active,  :hover,  : 
focus) 

• Pseudo  class  selectors  on  all  elements  (not  just  <a>) 

• :first-line,  :first-letter 

• :before,  :after  (for  adding  “content”) 

• First  child  selectors  E:fi rst-child) 

• Adjacent  selectors  (E  + F) 

• Attribute  selectors  ( foo=warning]) 


Examples  - http://www-personal.umich.edu/~gsilver/ui-experiiinents/welconne.htnnl 


An  exploration 


CTools  portal 

- Main  blocks 

- Namespacing 

- Decorative  cruft  (a  lot  of  needs  from  different 
inst.  and  cultures  needed  to  be  addressed) 

Announcements 

Common  rendering  needs  of  a webapp 


